<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="bootstrap.css"/>
    <link rel="stylesheet" href="bootstrap-theme.css"/>
    <script src="jquery-3.1.1.min.js"></script>
    <style type="text/css">
        body{font-size:13px;}
        .frame{text-align:center;}
        .frame .img{padding:3px;border:solid 1px #ccc;}
        .frame .content .tip{margin:5px;}
    </style>
    <script type="text/javascript">
        var arrImg=new Array("Images/Flint01.jpg","Images/Flint02.jpg");
        var intCur= 0,intR=0;
        $(function(){
            $(".img").mousemove(function(e){
                var positionX= e.originalEvent.X-$(this).offset().left||
                        e.originalEvent.layerX-$(this).offset().left||0;
                var positionY=e.originalEvent.Y-$(this).offset().left||
                        e.originalEvent.layerY-$(this).offset().left||0;
                var intX=parseInt(positionX);
                var intW=parseInt($(this).width()/2);
                intR=(intX>intW)?1:0;
                $(".tip").html("X:"+positionX+","+"Y："+positionY);
            }).click(function(){
                if(intR){
                    if(intCur<=arrImg.length){
                        intCur=intCur+1;
                    }
                }else{
                    if(intCur>0){
                        intCur=intCur-1;
                    }
                }
                $(".img").attr("src",arrImg[intCur]);
            });
        });
    </script>
    <title>cathcMousePosition</title>
</head>
<body>
<div class="frmae">
    <div class="content">
        <div class="tip">X:0,Y:0</div>
        <a href="javascript:">
            <img src="Images/Flint04.jpg" class="img"/>
        </a>
    </div>
</div>
</body>
</html>